<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片时间浏览</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="fixedDate" style="
        position: fixed;
        top: 40px;
        left: 20px;
        background: rgba(0,0,0,0.7);
        color: white;
        font-weight: bold;
        padding: 5px 10px;
        z-index: 9999;
        font-size: 20px;
        user-select: none;
    "></div>

    <div id="topbar">
        选择日期：
        <input type="date" id="dateInput">

        列数：
        <input type="number" id="columnInput" min="1" value="6">
        <select onchange="document.getElementById('columnInput').value=this.value; document.getElementById('columnInput').dispatchEvent(new Event('change'));">
            <option value="">👇</option>
            <option value="3">3⭐️</option>
            <option value="6">6⭐️</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        间隔(分)：
        <input type="number" id="intervalInput" min="1" value="10">
        <select onchange="document.getElementById('intervalInput').value=this.value; document.getElementById('intervalInput').dispatchEvent(new Event('change'));">
            <option value="">👇</option>
            <option value="2">2⭐️</option>
            <option value="10">10⭐️</option>
            <option value="1">1</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="60">60</option>
        </select>

        <span id="progress">加载中...</span>
    </div>

    <div id="toc-container">
        <ul id="toc-list"></ul>
    </div>

    <div id="main"></div>

    <!-- 放大预览 -->
    <div id="overlay">
        <div class="nav-button" id="prevBtn">&#8592;</div>
        <img id="overlayImg" src="">
        <div class="nav-button" id="nextBtn">&#8594;</div>
    </div>

    <script src="script.js"></script>
</body>
</html>
